import { useState } from 'react';
import style from './FormCom.module.scss'
import {
  Space,
  Button,
  Form,
  Input,
  Radio
} from 'antd';


interface Promps {
  submit: (params:any) => void
  initValue?: { username: string; password: string; confirm: string; status: number; id:string }
  onShow: (value: boolean) => void
}


function FormCom ( props:Promps ) {
  const [form] = Form.useForm();

  const onFinish = (values: {username: string; password: string; status: number;email: string}) => {
    if(props.initValue){
      props.submit({
        username:values.username,
        password:values.password,
        status:Number(values.status),
        id:props.initValue.id
      })
      form.resetFields()
      props.onShow(false)
    } else {
      props.submit({
        username:values.username,
        password:values.password,
        status:Number(values.status),
        email:values.email
      })
    }
  };

  return (
    <div className={style.from}>
      <Form
        form={form}
        name="form"
        onFinish={onFinish}
        initialValues={{...props.initValue,status:props.initValue?.status.toString()}}
        style={{ maxWidth: 600,backgroundColor:'#fff',padding:'20px',borderRadius:'10px' }}
        scrollToFirstError
      >
        <Form.Item
          name="username"
          label="用户名"
          rules={[
            {
              required: true,
              message: '请输入用户名!',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          name="email"
          label="邮箱"
          rules={[
            {
              required: true,
              message: '请输入邮箱!',
            },
            {
              type: 'email',
              message: '请输入正确的邮箱!',
            }
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          name="password"
          label="密码"
          rules={[
            {
              required: true,
              message: '请输入密码!',
            },
            {
              min: 6,
              message: '密码不能小于6位!', 
            }
          ]}
          hasFeedback
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          name="confirm"
          label="确认密码"
          dependencies={['password']}
          hasFeedback
          rules={[
            {
              required: true,
              message: '请确认密码!',
            },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue('password') === value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('两次输入的密码不一致!'));
              },
            }),
          ]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          name="status"
          label="启用状态"
          rules={[
            {
              required: true,
              message: '请选择启用状态!'
            },
          ]}
        >
          <Radio.Group>
            <Radio value="0"> 禁用 </Radio>
            <Radio value="1"> 启用 </Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item className={style.btn}>
          <Space>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <Button  onClick={()=>{props.onShow(false)}}>
              取消
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  )
}

export default FormCom